<template>
  <span>
      <el-select
        v-model="currentValue"
        :placeholder="myPlaceholder"
        @change="changeSelect"
        :multiple="multiple"
        :style="style"
        :disabled="disabled"
        :size="size"
        clearable="clearable"
      >
        <el-option
          v-for="item in datas"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

  </span>

</template>

<script>

  import request from '@/utils/request'

  export default {
    name:"LSelect",
    model: {
      prop: 'value',
      event: 'cv'
    },
    data() {
      return {
        currentValue: this.value,
        datas: this.data || []
      };
    },
    computed: {
      style() {
        let width = this.width;
        return this.width ? 'width:' + width + 'px;' : 'width:100%;';
      },
      myPlaceholder(){
        return this.placeholder || '请选择';
      }
    },
    created(){
      this.initValue()
    },
    watch: {
      value(val) {
        this.initValue()
      },
      typeCode() {
        this.loadData();
      },
      queryParams:{
        handler(newData,oldData){
          this.queryData();
        },
        deep:true
      }
    },
    mounted() {
      if (!this.isLocal()) {
        if(this.url){
          this.queryData();
        }else{
          this.loadData();
        }
      }
    },
    methods: {
      isLocal() {
        return this.data ? true : false;
      },
      initValue(){
        if(this.multiple){
          this.currentValue = this.formatJson(this.value);
        }else{
          this.currentValue = this.value;
        }
      },
      changeSelect: function (v) {
        if (this.multiple) {
          this.$emit('cv', this.toJson(v));
        } else {
          this.$emit('cv', v);
        }
      },
      loadData() {
        let me = this;
        this.getDicts(me.typeCode).then(response => {
          let tempDatas = response.data;
          //加入下拉框可以过滤掉某些数据
          let tempTypeDatas = [];
          tempDatas.forEach(item => {
            if (me.filterCode) {
              let tempFilterCode = me.filterCode.split(",");
              if (tempFilterCode.indexOf(item.dictValue) < 0) {
                tempTypeDatas.push(this.setTempTypeData(item));
              }
            } else {
              tempTypeDatas.push(this.setTempTypeData(item));
            }
          });
          me.datas = tempTypeDatas;
        });
      },
      queryData() {
        let me = this;
        if (me.url) {
          request({
            url: me.url,
            method: 'get',
            params: this.queryParams
          }).then(res=>{
            let tempDatas = [];
            res.rows.forEach(item=>{
              tempDatas.push(this.setTempTypeData(item));
            })
            this.datas = tempDatas;
          })
        }
      },
      setTempTypeData(row){
        let labels = [];
        if(this.optionLabel instanceof Array){
          this.optionLabel.forEach(v=>{
            labels.push(row[v])
          })
        }else{
          labels.push(row[this.optionLabel])
        }
        return {
          value:row[this.optionValue]+'',
          label:labels.join("-")
        }
      },
      formatJson(str) {
        if (str && str.length > 0) {
          return str.split(",");
        }
        return str;
      },
      toJson(obj) {
        let vals = [];
        obj.forEach(v=>{vals.push(v)})
        return vals.join(",");
      },
      // 回显数据字典
      selectDictLabel() {
        var actions = [];
        Object.keys(this.datas).some((key) => {
          if (this.datas[key].value == ('' + this.currentValue)) {
            actions.push(this.datas[key].label);
            return true;
          }
        })
        return actions.join('');
      },
      selectDictLabels() {
        var actions = [];
        var currentSeparator = ",";
        Object.keys(this.currentValue).some((val) => {
          Object.keys(this.datas).some((key) => {
            if (this.datas[key].value == ('' + this.currentValue[val])) {
              actions.push(this.datas[key].label + currentSeparator);
            }
          })
        })
        return actions.join('').substring(0, actions.join('').length - 1);
      }
    },
    props: {
      placeholder: {
        type: String
      },
      typeCode: {
        type: String,
      },
      value: {
        type: [String, Array, Number]
      },
      disabled: {
        type: Boolean,
        default: false
      },
      multiple: {
        type: Boolean,
        default: false
      },
      clearable: {
        type: Boolean,
        default: false
      },
      width: {
        type: Number
      },
      data: {
        type: Array
      },
      filterCode: {
        type: String
      },
      optionValue: {
        type: String,
        default: 'dictValue'
      },
      optionLabel: {
        type: [String , Array ],
        default: 'dictLabel'
      },
      url: {
        type: String
      },
      queryParams: {
        type:Object,
        default:()=>{}
      },
      size:{
        type: String,
        default:'mini'
      }
    }
  };

</script>
